import 'package:auto_size_text_field/auto_size_text_field.dart';
import 'package:flutter/material.dart';
import 'package:flutter_soundmagus/page/delay/delay_controller.dart';
import 'package:flutter_soundmagus/widget/eq/eq.dart';
import 'package:flutter_soundmagus/widget/widget.dart';
import 'package:get/get.dart';
import 'package:flutter_soundmagus/util/util.dart';

class GainItem extends GetView<DelayController> {
  final int index;
  final FocusNode focusNode;
  GainItem({Key? key, required this.index, required this.focusNode}) : super(key: key);

  DelayItemController get c => Get.find<DelayController>().delayItemControllers[index];

  @override
  Widget build(BuildContext context) {
    Widget child = Obx(() => CircularSlider(
          min: -20,
          max: 0,
          initialValue: c.volume.value,
          enable: c.activeGain.value && !c.mute.value,
          onChange: (v) => c.updateVolume(v),
          onIncrease: c.increaseVolume,
          onDecrease: c.decreaseVolume,
          decreaseOffset: Offset(0, 8),
          increaseOffset: Offset(0, 8),
          creaseBackgroundColor: Colors.black.withOpacity(0.1),
          innerWidget: (v) => SizedBox.shrink(),
        ));
    child = Stack(
      children: [
        SizedBox(
          child: child,
          width: 120.w,
          height: 120.w,
        ),
        Align(
          alignment: Alignment.topCenter,
          child: Column(
            mainAxisSize: MainAxisSize.min,
            children: [
              SizedBox(
                height: 15,
              ),
              Obx(() => ZFButton(
                    onPressed: c.activeGain.toggle,
                    title: DataMng.shared.chNames[index].value,
                    size: Size(60.w, 20.w),
                    selected: c.activeGain.value,
                    borderColor: c.activeGain.value
                        ? Theme.of(context).primaryColor
                        : Theme.of(context).textTheme.bodyLarge!.color!,
                    style: TextStyle(fontSize: 10),
                  )),
              Padding(
                padding: const EdgeInsets.symmetric(vertical: 5),
                child: Obx(() => Text('${c.volume.toInt()}dB')),
              ),
              Obx(() => ZFButton(
                    title: 'LINKED',
                    onPressed: c.linked.toggle,
                    size: Size(60.w, 20.w),
                    selected: c.linked.value,
                    borderColor:
                        c.linked.value ? Theme.of(context).primaryColor : Theme.of(context).textTheme.bodyLarge!.color!,
                    style: TextStyle(fontSize: 10),
                  )),
            ],
          ),
        ),
        Align(
          alignment: Alignment.bottomCenter,
          child: Row(
            mainAxisAlignment: MainAxisAlignment.spaceAround,
            children: [
              Obx(() => ZFButton(
                    title: 'Mute',
                    selected: c.mute.value,
                    enable: c.activeGain.value,
                    onPressed: () => c.updateMute(!c.mute.value),
                  )),
              Obx(() => ZFButton(
                    title: c.phase.value ? '180°' : '0°',
                    selected: c.phase.value,
                    enable: c.activeGain.value,
                    onPressed: () => c.updatePhase(!c.phase.value),
                  )),
            ],
          ),
        )
      ],
    );
    child = SizedBox(
      width: 120.w,
      height: 140.w,
      child: child,
    );
    return child;
  }
}
